<template>
    <!--购物车-->
    <div class="cart">
        <el-table
                :data="tableData"
                :header-cell-style="{background:'#ebebeb',color:'#606266'}"
                style="width: 100%">
            <el-table-column
                    label="商品图片"
                    width="150">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.homeImg"
                            :preview-src-list="[scope.row.homeImg]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称">
                <template slot-scope="scope">
                    <el-link title="查看详细" @click="goInfo(scope.row)" type="primary">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="数量"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="totalPrice"
                    label="合计"
                    width="100">
                <template slot-scope="scope">
                    {{scope.row.price*scope.row.number}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="set-bar">
            <div class="set-info">
                <a class="back" href="/" style="width:90px;"><i class="el-icon-d-arrow-left"></i>继续挑选</a>
                <div class="set-stat">
                    应付金额:
                    <div class="price">
                        <span class="price-sign">¥</span>
                        <span class="price-num" id="totalMoney">{{totalPrice}}</span>
                    </div>
                </div>
            </div>
            <el-button v-if="tableData!=null" style="float: right;margin-top: 10px;margin-left: 30px" class="btn" @click="settlement()">结算
            </el-button>
            <el-button  v-if="tableData!=null"  style="float: right;margin-top: 10px" class="empty" @click="empty()">清空</el-button>
        </div>
        <settlementDia ref="settlementDia"></settlementDia>
    </div>
</template>

<script>
    import * as cart from '@/util/cart'

    export default {
        name: "cart",
        components: {
            'settlementDia': () => import('./module/settlementDia.vue'),

        },
        computed: {
            totalPrice() {
                if(this.tableData!=null){
                    let totalPrice = 0;
                    for (let i = 0; i < this.tableData.length; i++) {
                        let row = this.tableData[i];
                        totalPrice += (row.price * row.number);
                    }
                    return totalPrice;
                }else{
                    return 0;
                }

            }
        },
        data() {
            return {
                tableData: cart.get(),
            }
        },
        methods: {

            empty() {
                this.$confirm('是否确定清空购物车?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res=>{
                    this.$cart.empty()
                    this.tableData = cart.get();
                })

            },
            //查看详细
            goInfo(item) {
                this.$router.push({path: '/home/goods_info/' + item.id})
            },

            //结算
            settlement() {
                this.$refs.settlementDia.openDia();
            },

            del(id) {
                cart.del(id);
                this.tableData = cart.get();
            },
        }
    }
</script>

<style scoped lang="scss">
    .cart {
        width: 50%;
        margin: 0 auto;
        padding-top: 20px;

    }

    .set-bar {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .set-bar:after {
        content: " ";
        display: table;
    }

    .set-bar:after {
        clear: both;
    }

    .set-bar .set-info {
        font-size: 12px;
        line-height: 52px;
        float: left;
        width: 95%;
        height: 52px;
        padding: 0 20px;
        border: 1px solid #d9d9d9;
    }

    .set-bar .set-info:before,
    .set-bar .set-info:after {
        content: " ";
        display: table;
    }

    .set-bar .set-info:after {
        clear: both;
    }

    .set-bar .set-info .back {
        float: left;
    }

    .set-bar .set-info .back .ico {
        margin-top: -6px;
        margin-right: 5px;
    }

    .set-bar .set-info .set-stat {
        float: right;
    }

    .set-bar .set-info .set-stat .price {
        font-size: 18px;
        font-weight: bold;
        display: inline-block;
        color: #ff6a00;
    }

    .btn {
        color: #ffffff;
        background-color: #3368ff;
        border-color: #3368ff;
    }

    .empty {
        color: #ffffff;
        background-color: #ff6a00;
        border-color: #ff6a00;
    }
</style>
